<template>
  <div style="height:100%;">
    <loading v-model="isLoading"></loading>
    <!--<view-box style="height: 100%" ref="viewBox">-->
      <!--<x-header slot="header" style="width:100%;position:absolute;left:0;top:0;z-index:100;" :left-options="leftOptions"-->
      <!--:title="title"-->
      <!--@on-click-title="scrollTop"></x-header>-->
      <!--<div style="padding: 15px 15px;" v-show="isShowBar">-->
        <!--<button-tab>-->
          <!--<button-tab-item :selected="$i18n.locale() === 'zh-CN'" @click.native="setLocale('zh-CN')">中文</button-tab-item>-->
          <!--<button-tab-item :selected="$i18n.locale() === 'en'" @click.native="setLocale('en')">English</button-tab-item>-->
        <!--</button-tab>-->
      <!--</div>-->

      <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
        <router-view class="router-view"></router-view>
      </transition>

      <tabbar class="vux-demo-tabbar" icon-class="vux-center" v-show="isTabbarPage" slot="bottom">
        <tabbar-item :link="{path:'/'}" :selected="isIndexPage">
          <div slot="icon" class="tab-item-img tab-img-home"></div>
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item :link="{path:'/orderList'}" :selected="isOrderPage">
          <<div slot="icon" class="tab-item-img tab-img-order"></div>
          <span slot="label">订单</span>
        </tabbar-item>
      </tabbar>
  <!--</view-box>-->
  </div>
</template>

<script>
import { ButtonTab, ButtonTabItem, ViewBox, XHeader, Tabbar, TabbarItem, Loading } from 'vux'
import { mapState, mapActions,mapGetters } from 'vuex'

export default {
  components: {
    ButtonTab,
    ButtonTabItem,
    ViewBox,
    XHeader,
    Tabbar,
    TabbarItem,
    Loading
  },
  data(){
    return {
      
    }
  },
  methods: {
    reload () {
      document.location.reload()
    },
    ...mapActions({
      updateDemoPosition:'updateDemoPosition',
      // updateHotel:'updateHotel',   
      // updateuserId:'updateuserId',
      // updateLoading:'updateLoadingStatus',
      // updateopenId:'updateopenId'
    }),
    setLocale (locale) {
      this.$i18n.set(locale)
      this.$locale.set(locale)
    }
  },
  mounted () {
    
  },
  beforeDestroy () {
    this.box.removeEventListener('scroll', this.handler, false)
  },
  watch: {
    path (path) {
      if (path === '/component/demo') {
        this.$router.replace('/demo')
        return
      }
    }
  },
  computed: {
    ...mapGetters({  
                //isLoading: 'getLoadingState'
                //userId:'getUserId'  
            }),  
    ...mapState({
      route: state => state.route,
      path: state => state.route.path,
      deviceready: state => state.app.deviceready,
      demoTop: state => state.vux.demoScrollTop,
      isLoading: state => state.vux.isLoading,
      direction: state => state.vux.direction
     }),
      isIndexPage () {
        return this.$route.path === '/'
      },
      isOrderPage () {
        return /orderList/.test(this.$route.path)
      },
      isTabbarPage () {
        var result = false
        if (this.$route.path === '/' || /orderList/.test(this.$route.path)) {
          result = true
        }
        return result
    }
  },
  created(){
    
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';
@import '~vux/src/styles/1px.less';
@import '~vux/src/styles/tap.less';

body {
  background-color: #fbf9fe;
}
html, body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

.demo-icon-22 {
  font-family: 'vux-demo';
  font-size: 22px;
  color: #888;
}
.weui-tabbar.vux-demo-tabbar {
  /** backdrop-filter: blur(10px);
  background-color: none;
  background: rgba(247, 247, 250, 0.5);**/
}
.vux-demo-tabbar .weui-bar__item_on .demo-icon-22 {
  color: #F70968;
}
.vux-demo-tabbar .weui-tabbar_item.weui-bar__item_on .vux-demo-tabbar-icon-home {
  color: rgb(53, 73, 94);
}
.demo-icon-22:before {
  content: attr(icon);
}
.vux-demo-tabbar-component {
  background-color: #F70968;
  color: #fff;
  border-radius: 7px;
  padding: 0 4px;
  line-height: 14px;
}
.weui-tabbar__icon {
  width: 2rem !important;
  height: 2rem !important;
}
.weui-tabbar__icon + .weui-tabbar__label {
  margin-top: 0!important;
  font-size: 1.1rem;
  font-family: "微软雅黑";
}
.vux-demo-header-box {
  z-index: 100;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

@font-face {
  font-family: 'vux-demo';  /* project id 70323 */
  src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot');
  src: url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.eot?#iefix') format('embedded-opentype'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.woff') format('woff'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.ttf') format('truetype'),
  url('https://at.alicdn.com/t/font_h1fz4ogaj5cm1jor.svg#iconfont') format('svg');
}

.demo-icon {
  font-family: 'vux-demo';
  font-size:20px;
  color: #04BE02;
}

.demo-icon:before {
  content: attr(icon);
}

/**
* vue-router transition
*/
.router-view {
  width: 100%;
  height: 100%;
  animation-duration: 0.5s;
  animation-fill-mode: both;
  backface-visibility: hidden;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  height: 100%;
  position: absolute;
  left: 0;
}
.vux-pop-out-enter-active {
  animation-name: popInLeft;
}
.vux-pop-out-leave-active {
  animation-name: popOutRight;
}
.vux-pop-in-enter-active {
  perspective: 1000;
  animation-name: popInRight;
}
.vux-pop-in-leave-active {
  animation-name: popOutLeft;
}
@keyframes popInLeft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes popOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}
@keyframes popInRight {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes popOutRight {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }
}
  .weui-tab__panel{
    padding: 0;
  }

.tab-img-home{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_home_unselect.png');
}
.tab-img-order{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_order_new.png');
}
.weui-bar__item_on .tab-img-home{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_home_select.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.weui-bar__item_on .tab-img-order{
  background:url('http://static.52letsgo.cn/zz/wechatimg/ic_order_new_select.png');
  background-size: 100%;
  background-repeat: no-repeat;
}
.weui-bar__item_on span{
  color: orange;
}
.weui_tabbar_item {
  font-family: "Microsoft Yahei";
  padding: .4rem 0 .4rem 0;
}
.tab-item-img{
  width: 2rem;
  height: 2rem;
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>
